<!--
* @Description: 资源信息 - 表单
* @Author: DHL
* @Date: 2022-03-14 17:13:43
 * @LastEditors: DHL
 * @LastEditTime: 2023-10-07 09:49:16
-->
<template>
  <tw-dialog
    v-model="visible"
    :title="title"
    :loading="loading"
    width="800px"
    height="600px"
    @close="handleClose"
  >
    <el-form
      ref="dbFormRef"
      :model="dbForm"
      :rules="rules"
      label-width="90px"
      :disabled="action === 'view'"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目" prop="projectId">
            <el-input
              v-model="commonObj.projectName"
              clearable
              placeholder="请选择所属项目"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="上级资源" prop="parentResId">
            <!-- <el-input
              v-model="commonObj.parentResName"
              clearable
              placeholder="根节点"
              :disabled="true"
            ></el-input> -->

            <el-tree-select
              v-model="commonObj.parentResId"
              :data="resourceTree"
              filterable
              node-key="id"
              check-on-click-node
              show-checkbox
              check-strictly
              :props="{ label: 'text' }"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="资源类型" prop="resType">
            <el-select
              v-model="dbForm.resType"
              clearable
              placeholder="请选择资源类型"
              @change="handleResTypeChange"
            >
              <tw-dic dicKey="RESOURCE_TYPE"></tw-dic>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="资源状态" prop="status">
            <el-select v-model="dbForm.status" clearable placeholder="请选择资源状态">
              <tw-dic dicKey="TWRS"></tw-dic>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="是否缓存" prop="iscache">
            <el-select v-model="dbForm.iscache" clearable placeholder="请选择是否缓存">
              <tw-dic dicKey="ISCACHE"></tw-dic>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider />

      <el-form-item label="资源编码" prop="name">
        <el-input v-model="dbForm.id" clearable placeholder="请输入资源编码"></el-input>
      </el-form-item>

      <el-form-item label="资源名称" prop="name">
        <el-input v-model="dbForm.name" clearable placeholder="请输入资源名称"></el-input>
      </el-form-item>

      <el-form-item label="资源路径" prop="url">
        <el-input v-model="dbForm.url" clearable placeholder="请输入资源路径"></el-input>
      </el-form-item>

      <el-form-item label="资源图标" prop="iconCls">
        <el-input v-model="dbForm.iconCls" clearable placeholder="请输入资源图标">
          <template #prepend>
            <el-button>
              <svg-icon :iconClass="dbForm.iconCls ? dbForm.iconCls : ''"></svg-icon>
            </el-button>
          </template>
          <template #append>
            <el-button @click="handleOpenIcon">
              <svg-icon iconClass="instagram"></svg-icon>
              选择图标
            </el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="目标" prop="target">
        <el-select
          v-model="dbForm.target"
          clearable
          placeholder="请选择目标"
          :disabled="dbForm.resType !== '0'"
        >
          <tw-dic dicKey="RESOURCE_TARGET"></tw-dic>
        </el-select>
      </el-form-item>

      <el-form-item label="打开模式" prop="openType">
        <el-select
          v-model="dbForm.openType"
          clearable
          placeholder="请选择打开模式"
          :disabled="dbForm.resType !== '0'"
        >
          <tw-dic dicKey="RESOURCE_OPEN_TYPE"></tw-dic>
        </el-select>
      </el-form-item>

      <el-form-item label="资源描述" prop="description">
        <el-input v-model="dbForm.description" clearable placeholder="请输入资源描述"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleReset(true)">取 消</el-button>
      <el-button v-if="action === 'add'" type="warning" @click="handleSubmit(true)">
        提交并继续
      </el-button>
      <el-button v-if="action !== 'view'" type="primary" @click="handleSubmit(false)">
        提 交
      </el-button>
    </template>

    <resourceSelectIcon
      ref="resourceSelectIconRef"
      :isSelect="true"
      @selectIcon="handleSelectIcon"
    ></resourceSelectIcon>
  </tw-dialog>
</template>

<script src="./useForm.ts"></script>

<style scoped lang="scss">
  .el-divider--horizontal {
    margin-top: 0px;
  }
</style>
